<template>
<div class="map" style="height: 100%;position:relative;padding-left:4px; overflow:hidden;">
  <Row :class="{sweeping:isActive, open:isOpen}" >
    <seeping-type 
      @ievent = "ievent" 
      @linkages="linkages"
      @sprinkler = "sprinkler"
      @captureData = "captureData"
      @local="local"
      @suction = "suction"
      @suctionHide = "suctionHide"
      @addwarters = "addwarters"
      @addwarterHide = "addwarterHide"
      @sewage = "sewage"
      @sewageHide = "sewageHide"
      @channelHide = "channelHide"
      @zhuapai = "zhuapai"
      >
    </seeping-type>
    <div class="infos_flow" @click="isShrink">
        <Icon :type="!isOpen? 'chevron-up': 'chevron-down'" size="20"></Icon>
    </div>
  </Row>
  <loading v-show="showLoading"></loading>
  <div id="map" style="height:100%; z-index:1;"></div>
</div>
</template>

<script>
import {getlatlng} from 'config/api';
import {wgs84togcj02, gcj02tobd09} from 'libs/coordinate';
export default {
  data () {
    return {
      map: '',  //  地图
      datas: [],  //  车辆信息数据
      car_yasuo: require('common/img/car_yasuo_y.png'),  //  点聚合图标
      car_zp: require(`common/img/picpoint_all.png`),  //  抓拍
      car_tcc: require(`common/img/tingchechang1.png`),  //  停车场
      car_jsd: require(`common/img/jiashuidian1.png`),  //  加水点
      car_xwd: require(`common/img/paiwudian1.png`),  //  排污点
      markers: [],  //  车辆位置点数据
      speed: null,
      isOpen: true,
      isActive: true,
      bmarker: '',
      wgs: null, // wgs坐标
      gcj: null,  //  gcj坐标
      lushu: '',
      ttLayer: {
        data: [],
        IsShow: true
      },
      carLayer: {
        data: [],
        IsShow: true
      },
      markerClusterer: null,
      marker_capture: [], //  抓拍全局图标
      sprinklerArray: [],  // 洒水全局数组
      suctionArray: [],   //  吸污点
      addwarterArray: [],   //  加水点
      sewageArray: [],  //  排污点
      query: {
        orgId: 0,
        carTypes: `5,22,21,28,29,30,31,37,2,24,23`
      },
      isup: true
    };
  },
  watch: {
  },
  components: {
    'seeping-type': () => import('views/Sweeping/components/seeping_type'),
    'Loading': () => import('components/Loading/loading')
  },
  mounted () {
    this.$nextTick(() => {
      // 创建Map实例
      this.map = new BMap.Map("map");
      this.map.enableScrollWheelZoom(); //  启用滚轮缩放
      this.map.centerAndZoom(new BMap.Point(116.9, 34), 5);  //  地图加载默认定位坐标及缩放级别
      this.map.addControl(new BMap.NavigationControl({anchor: BMAP_ANCHOR_BOTTOM_RIGHT})); //  将比例尺控件添加到地图中
    });
    this.getData();
  },
  computed: {
    showLoading () {
      return this.$store.state.showLoading;
    }
  },
  methods: {
    //  点击顶部下拉按钮
    isShrink () {
      this.isOpen = !this.isOpen;
    },
    //  点击图层中的吸污点，加载吸污点图标
    suction (datas) {
      let latLng = '';  //  经纬度
      let myIcon = '';  //  自定义icon
      let marker = [];  //  存储经纬度、自定义图标
      let data = datas[0].potionList;
      for (var i = 0; i < data.length; i++) {
        latLng = new BMap.Point(data[i].longitude, data[i].latitude);  //  经纬度
        myIcon = new BMap.Icon(this.car_xwd, new BMap.Size(50, 50));  //  自定义图标
        marker = new BMap.Marker(latLng, {icon: myIcon}); //  存储经纬度和自定义图标
        this.suctionArray.push(marker); //  创建数组添加吸污点坐标点
        let content = `<div class="windowinfo">
                      <div><span>类型：</span><span>${datas[0].typeName}</span></div>
                      <div><span>名称：</span><span>${datas[0].name}</span></div>
                      <div><span>所属单位：</span><span>${datas[0].orgName}</span></div>
                      </div>`;
        this.suctionClick(content, marker);
        this.map.addOverlay(marker, {icon: myIcon});
      }
    },
    //  控制吸污点图标显示隐藏
    suctionHide (e) {
      for (var i = 0; i < this.suctionArray.length; i++) {
        if (e.length === 0) {
          this.suctionArray[i].hide();  // 隐藏吸污点
        } else {
          this.suctionArray[i].show();  // 显示吸污点
        }
      }
    },
    //  点击图层中的排污点，加载排污点图标
    sewage (datas) {
      let latLng = '';  //  经纬度
      let myIcon = '';  //  自定义icon
      let marker = [];  //  存储经纬度、自定义图标
      let data = datas[0].potionList;
      for (var i = 0; i < data.length; i++) {
        latLng = new BMap.Point(data[i].longitude, data[i].latitude);  //  经纬度
        myIcon = new BMap.Icon(this.paiwudian1, new BMap.Size(50, 50));  //  自定义图标
        marker = new BMap.Marker(latLng, {icon: myIcon}); //  存储经纬度和自定义图标
        this.sewageArray.push(marker);
        let content = `<div class="windowinfo">
                      <div><span>类型：</span><span>${datas[0].typeName}</span></div>
                      <div><span>名称：</span><span>${datas[0].name}</span></div>
                      <div><span>所属单位：</span><span>${datas[0].orgName}</span></div>
                      </div>`;
        this.sewageClick(content, marker);
        this.map.addOverlay(marker, {icon: myIcon});
      }
    },
    //  点击图层中的排污点，控制排污点图标显示隐藏
    sewageHide (e) {
      if (e.length === 0) {
        for (var i = 0; i < this.sewageArray.length; i++) {
          this.sewageArray[i].hide();  // 隐藏排污点
        }
      } else {
        for (var j = 0; j < this.sewageArray.length; j++) {
          this.sewageArray[j].show();  // 显示排污点
        }
      }
    },
    //  点击图层中的加水点，加载加水点图标
    addwarters (datas) {
      let latLng = '';  //  经纬度
      let myIcon = '';  //  自定义icon
      let marker = [];  //  存储经纬度、自定义图标
      for (var key in datas) {
        var item = datas[key];
        for (var i in item.potionList) {
          var lnglat = item.potionList[i];
          latLng = new BMap.Point(lnglat.longitude, lnglat.latitude);  //  经纬度
          myIcon = new BMap.Icon(this.car_jsd, new BMap.Size(50, 50));  //  自定义图标
          marker = new BMap.Marker(latLng, {icon: myIcon}); //  存储经纬度和自定义图标
          this.addwarterArray.push(marker); //  创建数组添加吸污点坐标点
          let content = `<div class="windowinfo">
                        <div><span>类型：</span><span>加水点</span></div>
                        <div><span>名称：</span><span>${item.name}</span></div>
                        <div><span>名称：</span><span>${item.id}</span></div>
                        <div><span>所属单位：</span><span>${item.orgName}</span></div>
                        </div>`;
          this.addwarterClick(content, marker);
          this.map.addOverlay(marker, {icon: myIcon});
        }
      }
    },
    //  点击图层中的加水点，控制加水点图标显示隐藏
    addwarterHide (e) {
      if (e.length === 0) {
        for (var i = 0; i < this.addwarterArray.length; i++) {
          this.addwarterArray[i].hide();  // 隐藏加水点
        }
      } else {
        for (var j = 0; j < this.addwarterArray.length; j++) {
          this.addwarterArray[j].show();  // 显示加水点
        }
      }
    },
    //  点击抓拍（右侧信息框内），清空全局数组中原有数据，并加载最新点
    captureData (datas) {
      if (this.marker_capture.length !== 0) {
        for (var i = 0; i < this.marker_capture.length; i++) {
          this.map.removeOverlay(this.marker_capture[i]); //  循环抓拍点全局数据，移除点
        }
      }
      this.marker_capture = []; //  清空全局抓拍数组
      var marker = '';
      for (let i = 0; i < datas.length; i++) {
        let wgs = wgs84togcj02(datas[i].longitude, datas[i].latitude);
        let gcj = gcj02tobd09(wgs[0], wgs[1]);
        let latlng = new BMap.Point(gcj[0], gcj[1]);
        let myIcon = new BMap.Icon(this.car_zp, new BMap.Size(30, 30));
        marker = new BMap.Marker(latlng, {icon: myIcon}); //  存储经纬度和自定义图标
        this.marker_capture.push(marker);
        this.map.addOverlay(marker);  //  添加覆盖物
        var msg = datas[i];
        var content = '';
        if (msg.imgsrc === undefined || msg.imgsrc === '') {
          content = "<div>车牌号:" + msg.vehiclePlateNum + "</div><div>时间:" + msg.captureTime + "</div><div>车牌号:" + msg.vehiclePlateNum + "</div>";
        } else {
          content += "<div>所属单位: 暂无字段</div>";
          content += "<div>时间：" + msg.captureTime + "</div>";
          content += "<div>车牌号：" + msg.vehiclePlateNum + "</div>";
          for (var n = 0; n < msg.imgsrc.length; n++) {
            content += "<img class='captureImg' src='//118.31.184.56:8070/" + msg.imgsrc[n] + "' />";
          }
        }
        this.captureClick(content, marker); //  抓拍点击事件
      }
    },
    //  点击图层中的抓拍，控制抓拍点图标显示隐藏
    zhuapai (e) {
      if (e.length === 0) {
        for (var i = 0; i < this.marker_capture.length; i++) {
          this.marker_capture[i].hide();  //  隐藏抓拍点
        }
      } else {
        for (var j = 0; j < this.marker_capture.length; j++) {
          this.marker_capture[j].show();  //  显示抓拍点
        }
      }
    },
    //  停车场（待处理）
    ievent (data, name, event) {
      let latLng = '';  //  经纬度
      let myIcon = '';  //  自定义icon
      let marker = [];  //  存储经纬度、自定义图标
      let content = '';
      if (event.length === 1 && data !== '') {
        data.forEach((element) => {
          let wgs = wgs84togcj02(element.longitude, element.latitude);
          let gcj = gcj02tobd09(wgs[0], wgs[1]);
          latLng = new BMap.Point(gcj[0], gcj[1]);  //  经纬度
          myIcon = new BMap.Icon(this.car_tcc, new BMap.Size(50, 50));  //  自定义图标
          marker = new BMap.Marker(latLng, {icon: myIcon}); //  存储经纬度和自定义图标
          content = `<div class="message">名称: ${name}</div>`;
          this.ttLayer.data.push(marker);
        });
        this.addClickHandler(content, marker);  //  添加停车场点击事件
        this.map.addOverlay(marker, {icon: myIcon});
      } else {
        this.getti(event);
      }
    },
    //  停车场隐藏（待处理）
    getti (e) {
      for (var k = 0; k < this.ttLayer.data.length; k++) {
        if (e.length === 1) {
          this.ttLayer.data[k].show();
        } else {
          this.ttLayer.data[k].hide();
        }
      }
    },
    // 点击不同作业类型时，加载不同路线（在点击作业类型时，清空全局数组中原有路线，加载最新路线）
    sprinkler () {
      let datas = this.$store.state.sprinkler;
      if (this.sprinklerArray !== '') {
        for (var i = 0; i < this.sprinklerArray.length; i++) {
          this.sprinklerArray[i].hide();  // 隐藏线段覆盖物
        }
      }
      this.sprinklerArray = []; //  清空路线全局数组
      let polylineSs = null;
      let points = null;
      for (let i = 0; i < datas.data.length; i++) {
        const e = datas.data[i];
        let wgs = wgs84togcj02(e.startLongitude, e.startLatitude);
        let gcj = gcj02tobd09(wgs[0], wgs[1]);
        let wgs1 = wgs84togcj02(e.endLongitude, e.endLatitude);
        let gcj2 = gcj02tobd09(wgs1[0], wgs1[1]);
        let starts = new BMap.Point(gcj[0], gcj[1]);
        let ends = new BMap.Point(gcj2[0], gcj2[1]);
        points = [starts, ends];
        polylineSs = new BMap.Polyline(points, {  //  创建直线对象
          strokeColor: "green",
          strokeWeight: 6,
          strokeOpacity: 0.8
        });
        this.sprinklerArray.push(polylineSs);
        if (e.finished === "true") {
          polylineSs.z.strokeColor = "green";
        } else {
          polylineSs.z.strokeColor = "red";
        }
        this.map.addOverlay(polylineSs);  //  添加线段覆盖物
        this.sprinklerClick(e, polylineSs);  //  添加路线点击事件
      }
    },
    //  点击图层的路线，判断路线是应该隐藏还是显示
    channelHide (e) {
      if (e.length === 0) {
        for (var i = 0; i < this.sprinklerArray.length; i++) {
          this.sprinklerArray[i].hide();  // 隐藏线段覆盖物
        }
      } else {
        for (var j = 0; j < this.sprinklerArray.length; j++) {
          this.sprinklerArray[j].show();  // 显示线段覆盖物
        }
      }
    },
    //  地图联动，根据子组件传递信息，查找点，地图聚焦到点位置，并打开信息窗口
    //  这里的判断条件是当右边信息框渲染完成时点击而车辆位置，没有加载完成导致错误,这里做了返回处理。
    linkages (items) {
      this.map.closeInfoWindow();
      let point = null;
      let wgs = wgs84togcj02(items.longitude, items.latitude);
      let gcj = gcj02tobd09(wgs[0], wgs[1]);
      for (const i in this.carLayer.data) {
        let el = this.carLayer.data[i];
        if (gcj[0] === el.point.lng && gcj[1] === el.point.lat) {
          this.bmarker = this.carLayer.data[i];
          point = new BMap.Point(gcj[0], gcj[1]); //  经纬度
          break;
        }
      }
      this.map.centerAndZoom(point, 19);
      this.map.addOverlay(this.bmarker);
      this.bmarker.setAnimation(BMAP_ANIMATION_BOUNCE); //  设置弹跳动画
      this.bmarker.setTop(true); //  设置弹跳图标显示层级
    },
    //  点击图层的车辆位置，判断车辆位置是否勾选，并控制已存在的聚合点是该显示还是隐藏
    local (e) {
      if (e === true) {
        let latLng = '';  //  经纬度
        let myIcon = '';  //  自定义icon
        let marker = '';  //  所有marker
        this.markers = [];  //  清空markers
        let local = this.$store.state.local;
        local.forEach((element) => {
          let wgs = wgs84togcj02(element.longitude, element.latitude);
          let gcj = gcj02tobd09(wgs[0], wgs[1]);
          let imgurl = require(`common/img/${element.imgurl}`);
          myIcon = new BMap.Icon(imgurl, new BMap.Size(60, 60));  //  自定义图标
          latLng = new BMap.Point(gcj[0], gcj[1]);  //  经纬度
          marker = new BMap.Marker(latLng, {icon: myIcon}); //  存储经纬度和自定义图标
          this.markers.push(marker);  //  经纬度、自定义图标（全局
          this.carLayer.data.push(marker);
        });
        this.map.addOverlay(marker, {icon: myIcon});  //  将图标经纬度定位到地图中
        this.markerClusterer = new BMapLib.MarkerClusterer(this.map, {markers: this.markers}); //  创建聚合图标
        // let myStyles = [{url: this.car_yasuo, size: new BMap.Size(52, 63), textColor: '#666', textSize: 12}];  //  聚合图标的路径、大小、文字
        // this.markerClusterer.setStyles(myStyles); //  将自定义样式的图标添加到地图
        this.markerClusterer.setMaxZoom(14);
        this.markerClusterer.addMarkers(this.markers);
      } else {
        this.markerClusterer.removeMarkers(this.markers);
      }
    },
    //  点击作业类型时，加载不同车辆位置点
    // getDatas (patternId) {
    //   this.query.carTypes = patternId;
    //   this.getData();
    // },
    //  默认加载车辆位置点（综合作业）
    getData () {
      getlatlng().then((res) => {
        if (res.status === 200) {
          this.datas = res.data.data;
          let latLng = '';  //  经纬度
          let myIcon = '';  //  自定义icon
          let marker = '';  //  所有marker
          this.markers = [];  //  清空markers
          this.datas.forEach((element) => {
            this.wgs = wgs84togcj02(element.lng, element.lat);
            this.gcj = gcj02tobd09(this.wgs[0], this.wgs[1]);
            // let imgurl = require(`common/img/${element.imgurl}`);
            // myIcon = new BMap.Icon(imgurl, new BMap.Size(60, 60));  //  自定义图标
            latLng = new BMap.Point(this.gcj[0], this.gcj[1]);  //  经纬度
            marker = new BMap.Marker(latLng); //  存储经纬度和自定义图标
            this.markers.push(marker);  //  经纬度、自定义图标（全局
            this.carLayer.data.push(marker);
            let content = `<div class="windowinfo">
              <div><span>姓名 : </span><span>${element.name}</span></div>
              <div><span>工号 : </span><span>${element.number}</span></div>
              <div><span>家庭地址 : </span><span>${element.address}</span></div>
              <div><span>本月出勤次数 : </span><span>${element.chu}天</span></div>
              <div><span>本月迟到天数 : </span><span>${element.chi}天</span></div>
              </div>`;
            this.addClickHandler(content, marker);
          });
          this.$store.dispatch('local', this.datas);
          this.map.addOverlay(marker, {icon: myIcon});  //  将图标经纬度定位到地图中
          this.markerClusterer = new BMapLib.MarkerClusterer(this.map, {markers: this.markers}); //  创建聚合图标
          // let myStyles = [{url: this.car_yasuo, size: new BMap.Size(52, 63), textColor: '#666', textSize: 12}];  //  聚合图标的路径、大小、文字
          // this.markerClusterer.setStyles(myStyles); //  将自定义样式的图标添加到地图
          this.markerClusterer.setMaxZoom(14);  //  设置聚合最大作用级别，大于14就不使用聚合
          this.markerClusterer.addMarkers(this.markers);
        }
      });
    },
    //  点击停车场、车辆，打开信息窗口
    addClickHandler (content, marker) {
      marker.addEventListener("click", function (e) {
        let p = e.target;
        let point = new BMap.Point(p.getPosition().lng, p.getPosition().lat); //  窗口经纬度
        let infoWindow = new BMap.InfoWindow(content);  //  创建信息窗口对象
        this.map.openInfoWindow(infoWindow, point);  // 开启信息窗口
      });
    },
    //  点击作业路线，打开信息窗口
    sprinklerClick (element, polyline) {
      polyline.addEventListener("click", function (e) {
        let lng = e.point.lng;  //  获取鼠标点击经度
        let lat = e.point.lat;  //  获取鼠标点击经度
        var nums = (element.worklength / element.roadLength).toFixed(2);
        let times = element.worklength.toFixed(2);
        var content = '';
        content += "<div>道路名称：" + element.roadnames + "</div>";
        content += "<div style='margin-top: 4px;'>作业长度：" + times + "公里</div>";
        content += "<div style='margin-top: 4px;'>路线长度：" + element.roadLength + "公里</div>";
        for (var i = 0; i < element.workcarlist.length; i++) {
          content += "<div style='margin-top: 4px;'>作业车辆：" + element.workcarlist[i] + "</div>";
        }
        content += "<div style='margin-top: 4px;'>作业次数：" + nums + "次</div>";
        let pt = new BMap.Point(lng, lat);  //  窗口指向经纬度
        let infoWindow = new BMap.InfoWindow(content);  //  创建信息窗口对象
        this.map.openInfoWindow(infoWindow, pt);  // 开启信息窗口
      });
    },
    //  点击抓拍点，打开信息窗口
    captureClick (content, marker) {
      marker.addEventListener("click", function (e) {
        let p = e.target;
        let point = new BMap.Point(p.getPosition().lng, p.getPosition().lat); //  窗口经纬度
        let infoWindow = new BMap.InfoWindow(content);  //  创建信息窗口对象
        this.map.openInfoWindow(infoWindow, point);  // 开启信息窗口
      });
    },
    //  点击吸污点，打开信息窗口
    suctionClick (content, marker) {
      marker.addEventListener("click", function (e) {
        let p = e.target;
        let point = new BMap.Point(p.getPosition().lng, p.getPosition().lat); //  窗口经纬度
        let infoWindow = new BMap.InfoWindow(content);  //  创建信息窗口对象
        this.map.openInfoWindow(infoWindow, point);  // 开启信息窗口
      });
    },
    //  点击排污点，打开信息窗口
    sewageClick (content, marker) {
      marker.addEventListener("click", function (e) {
        let p = e.target;
        let point = new BMap.Point(p.getPosition().lng, p.getPosition().lat); //  窗口经纬度
        let infoWindow = new BMap.InfoWindow(content);  //  创建信息窗口对象
        this.map.openInfoWindow(infoWindow, point);  // 开启信息窗口
      });
    },
    //  点击加水点（marker），打开信息窗口
    addwarterClick (content, marker) {
      marker.addEventListener("click", function (e) {
        let p = e.target;
        let point = new BMap.Point(p.getPosition().lng, p.getPosition().lat); //  窗口经纬度
        let infoWindow = new BMap.InfoWindow(content);  //  创建信息窗口对象
        this.map.openInfoWindow(infoWindow, point);  // 开启信息窗口
      });
    }
  }
};
</script>

<style>
  /*多选模块*/
  .sweeping{
    width: 100%;
    background: rgba(255, 255, 255, 1);
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 1;
    border-top: 1px solid #ccc;
    transform: translateY(0px);    
    transition: all .5s ease;
  }
  .open {
    transform: translateY(-76px);    
    transition: all .5s ease;
  }
  .sweeping .infos_flow {
    position: absolute;
    z-index: 999;
    left: 50%;
    bottom: -20px;
    width: 40px;
    height: 20px;
    background-color: #fff;
    cursor: pointer;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    box-shadow: 0px 1px 1px rgba(0,0,0,0.3);
  }
  /*统计信息*/
  .sweeping .message>div{
    float: left;
    margin-right: 26px;
    line-height: 24px;
  }
  .sweeping .ivu-card{
    margin:6px;
    text-align: left;
  }
  /*多选框*/
  .sweeping .check_box{
    padding: 4px 0px 4px 0px;
    text-align: left;
    border-bottom:1px solid #ddd;
  }
  .sweeping .check_box>div:nth-child(1){
    width: auto;
    color: #2d8cf0;
    display: inline-block;
    line-height: 24px;
  }
   .sweeping .ivu-col-span-22 {
    line-height: 23px;
  }
  /*车辆信息部分*/
  .sweeping .car_cont{
    position: absolute;
    bottom: -454px;
    right: 0px;
    width: 400px;
    height: 420px;
    z-index: 10;
    background: #fff;
    transform: translateX(0px);
    transition: all .5s ease;
    box-shadow: 3px 3px 3px rgba(0,0,0,0.3);
  }
  .sweeping .cont{
    height: 380px;
    overflow: auto;
  }
  /*搜索框*/
  .sweeping .search {
    width:400px;
    position: absolute;
    bottom: -34px;
    right: 0px;
    z-index: 99;
    transform: translateX(0px);
    transition: all .5s ease;
  }
  .sweeping .flow {
    transform: translateX(400px);
    transition: all .5s ease;
  }
  .sweeping .deploy_sy {
    position: absolute;
    left: -24px;
    top: 40%;
    width: 24px;
    height: 50px;
    line-height: 56px;
    background-color:  #fff;
    cursor: pointer;
    text-align: center;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
    box-shadow: 0px 1px 1px rgba(0,0,0,0.3);
  }
  .sweeping .car_cont .ivu-collapse-content-box{
    padding:0px;
  }
  .sweeping .car_cont .ivu-collapse-header{
    text-align:left;
    padding-left:18px;
  }
  .sweeping .car_cont .ivu-collapse-content{
    padding: 0px 10px 0px 10px;
  }
  .seeping_type {
    width: 100%;
    height: auto;
    position: relative;
    box-shadow: 0 3px 3px rgba(0,0,0,0.3);
    padding: 5px 10px 4px 10px;
  }
  .seeping_type .horizontal_sy {
    display: inline;
  }
  .seeping_type .sy_pages {
    padding: 7px;
    border-top: 1px solid #ddd;
  }
  .seeping_type .ivu-card{
    margin: 0px;
    border: 0px;
    cursor: pointer;
    border-bottom: 1px solid #ddd;
  }
  .seeping_type .ivu-card:hover{
    background: #e3e9fb;
    border-bottom: 0px;
    box-shadow: 0 3px 3px rgba(0,0,0,0.3);
    margin-top: 4px;
    margin-bottom: 4px;
  }
  .seeping_type .cont .ivu-card-body{
    padding: 14px;
  }
  .seeping_type .allroad{
    max-height:62px;
    overflow-y: scroll;
  }
  .seeping_type .v_type{
    height: 24px;
    overflow-y: auto;
  }
  .seeping_type .ivu-input-group-prepend{
    border-radius: 0px;
  }
  .seeping_type .search input, .search>div>div{
    border-radius: 0px;
  }
  .seeping_type .scza {
    text-decoration:underline;
  }
  .seeping_type .btnmsg a:hover{
    text-decoration:underline;
  }
  .windowinfo>div{
    margin-top: 4px;
  }
  .captureImg{
    width:160px;height:120px;display:inline-block;
  }
  /* 下拉动画 */
  .allanmit{
    display: none;
  }
  .message{
    border-bottom: 0px;
    padding-bottom: 0px;
  }
  .up .allanmit{
    display: block;
    overflow: hidden;
    animation: down .3s;
  }
  @keyframes down {
    from {height: 0px;}
    to {height: 98px;}
  }
  /* .open .seeping_type{
    animation: ups .2s;
  }
  .open .allanmit{
    display: none;
  } */
  @keyframes ups {
    from {height: 98px;}
    to {height: 34px;}
  }
  /* .open .message{
    padding-bottom: 0px;
    border-bottom: 0px;
  } */
</style>